<template>
	<div class="rankBox">
		<div  ref="rank" :style="{width:width,height:height}"></div>
	</div>
</template>

<script>
import * as echarts from 'echarts';
export default{
	data(){
		return {
			width:'100%',
			height:'250px',
			startValue:0,//区域缩放的起点值
			endValue:9,//区域缩放的终点值
			timer:null
		}
	},
	computed:{
		data(){
			return this.$store.state.asymptomatic
		}
	},
	watch:{
		data(newData){
			this.updateChart();
		}
	},
	methods:{
		initChart(){
			this.myChart = echarts.init(this.$refs.rank,'westeros');
			this.myChart.on('mouseover',()=>{
				clearInterval(this.timer)
			})
				this.myChart.on('mouseout',()=>{
					this.startInterval()
				})
			let initOption={
				title:{
					text:'▋ 全国省份无症状分统计图',
					textStyle:{
						color:'#fff'
					},
					left:20,
					top:20
				},
				grid:{
					top:'40%',
					left:'5%',
					right:'5%',
					bottom:'5%',
					containLabel:true
				},
				tooltip:{
					show:true,
				},
				dataZoom:{
					show:false,
					startValue:this.startValue,
					endValue:this.endValue
				},
				xAxis:{
					type:'category'
				},
				yAxis:{
					type:'value'
				},
				series:[
					{
						type:'bar',
						itemStyle:{
							color:(arg)=>{
								if(arg.value>3000){
									return echarts.graphic.LinearGradient(0,0,0,1,[
										{
											offset:0,
											color:'#0ba82c'
										},
										{
											offset:1,
											color:'#4ff778'
										},
									])
								}else if(arg.value > 2000){
									return echarts.graphic.LinearGradient(0,0,0,1,[
										{
											offset:0,
											color:'#2e72bf'
										},
										{
											offset:1,
											color:'#23e5e5'
										},
									])
								}else{
									return echarts.graphic.LinearGradient(0,0,0,1,[
										{
											offset:0,
											color:'#8360c3'
										},
										{
											offset:1,
											color:'#2ebf91'
										},
									])
								}
							}
						}
					}
				]
			}
			this.myChart.setOption(initOption);
		},
		updateChart(){
			let _xAixs = this.data.map((item)=>{
				return item.name;
			})
			let _yAixs = this.data.map((item)=>{
				return item.value;
			})
			this.myChart.setOption({
				xAxis:{
					data:_xAixs
				},
				series:[
					{
						data:_yAixs  
					}
				]
			});
			this.startInterval();
		},
		startInterval(){
			if(this.timer){
				clearInterval(this.timer)
			}
			this.timer =  setInterval(()=>{
				this.startValue++;
				this.endValue++;
				if(this.endValue >this.data.length-1){
					this.startValue =0;
					this.endValue =9;
				}
				this.myChart.setOption({
					dataZoom:{
						startValue:this.startValue,
						endValue:this.endValue
					}
				})
			},2000)
		},
		screenAdapter(){
			const offsetWidth = this.$refs.rank.offsetWidth /100*3.6;
			const adapterOption = {
				series:[
					{
						itemStyle:{
							borderRadius:[33,33,0,0]
						}
					}
				]
			};
			this.myChart.setOption(adapterOption);
			this.myChart.resize({
				animation:{
					duration:300
				}
			})
		}
	},
	mounted() {
		this.initChart();
		this.screenAdapter();
		window.addEventListener('resize',this.screenAdapter)
	},
	beforeDestroy() {
		clearInterval(timer);
		window.removeEventListener('resize',this.screenAdapter);
	}
}
</script>
</script>

<style>
</style>
